<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../js/layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<script src="../js/jquery.min.js"></script>
		<script src="../js/layui/layui.js"></script>
		<script src="../js/common.js"></script>
	</head>

	<body>
		<style type="text/css">
			td {
				line-height: 30px;
			}
		</style>
		<div id="table-1"></div>
		<br /><br />
		<div>
			<button id="btn21">动态添加table</button>
			<button id="btn22">暂无数据</button>
		</div>
		<style type="text/css">
			#table-1 .m-table {
				overflow: overlay;
			}
		</style>
		<script type="text/javascript">
			//$.get('xxx.json',function(data){
			var data1 = [{
				'id': 'id1',
				'checked': true,
				'username': '用户名1',
				'val': 11

			}, {
				'id': 'id2',
				'checked': false,
				'disabled': true,
				'username': '用户名2(禁选)',
				'val': 11

			}];

			var deploy1 = {
				elem: '#table-1',
				width: '892px',
				height: '120px',
				data: data1,
				cols: [{
						type: 'numbers',
						fixed: 'center',
						fixed: 'left',
						title: '序号'
					}, {
						type: 'checkbox',
						fixed: 'left',
						width: '40px',
					}, {
						field: function(d) {
							return 'ID:' + d.id
						},
						title: 'ID',
						width: '180px',
						align: 'center',
						style: 'color:#f00;'
					}, {
						field: 'username',
						title: '<用户名>'
					},
					{
						field: 'val',
						title: '值'
					}
				]
			};
			var init1
			setTimeout(function() {
				init1 = dataTable(deploy1);
				$checkedTr = $('#table-1 .tbody input:checked').parents('.tbody');
				$checkedTr.each(function() {
					var index = $(this).attr('item-index');
					console.log('从当前数据中获取对应的数据行', data1[index]);
					var colsThisData = init1.config.data[index];
					console.log('从实例中获取对应的数据行', colsThisData);
				})
			}, 1000)

			//更新表格
			$('#btn21').click(function() {
				var data2 = [{
					'id': 'id1',
					'checked': true,
					'username': '用户名1',
					'val': 11
				}, {
					'id': 'id2',
					'checked': true,
					'username': '用户名2',
					'val': 22
				}, {
					'id': 'id3',
					'checked': false,
					'disabled': true,
					'username': '用户名3(禁选)',
					'val': 33
				}, {
					'id': 'id2',
					'checked': true,
					'username': '用户名2',
					'val': 44
				}, {
					'id': 'id3',
					'checked': false,
					'disabled': true,
					'username': '用户名3(禁选)',
					'val': 55
				}];
				//合计
				var total2 = ['-', '-', '-', '合计:' + (function() {
					var totalV = 0;
					$.each(data2, function(i, item) {
						totalV += item.val;
					});
					return totalV;
				})()];

				init1.update({
					data: data2,
					cols: [{
							type: 'checkbox',
							fixed: 'left',
							width: '40px',
						}, {
							field: function(d) {
								return 'ID:' + d.id_x.y
							},
							title: 'ID',
							width: '180px',
							align: 'center',
							style: 'color:#f00;'
						}, {
							field: 'username',
							title: '<用户名>'
						},
						{
							field: 'val',
							title: '值123'
						}
					],
					total: total2
				});
			});
			$('#btn22').click(function() {
				var data3 = [];
				//合计
				var total3 = undefined;

				init1.update({
					data: data3,
					cols: [{
							type: 'checkbox',
							fixed: 'left',
							width: '40px',
						}, {
							field: function(d) {
								return 'ID:' + d.id
							},
							title: 'ID',
							width: '180px',
							align: 'center',
							style: 'color:#f00;'
						}, {
							field: 'username',
							title: '<用户名>'
						},
						{
							field: 'val',
							title: '值123'
						}
					],
					total: null
				});
			});
		</script>
	</body>

</html>